<template>
<!-- vh:可视窗口的高度 -->
  <el-container class="bg-light" style="min-height: 100vh">
    <el-header style="height: 4rem" class="headcolor">
      <el-row  class="text-center">
        <el-col :span="4" class="text-center" >
          <img src="@/assets/logo.png" style="height: 4rem" />
        </el-col>
        <el-col :span="20">
          <el-menu
            mode="horizontal"
            class="h-100 headcolor"
            :router="true"
          >
            <el-menu-item index="/" class="ms-auto">返回首页</el-menu-item>
          </el-menu></el-col
        >
      </el-row>
    </el-header>
    <el-main class="bg-white shadow-lg w-75 mx-auto" >
      <!-- 笔记标题 -->
      <div>
        <span class="fs-1"> {{ note.noteName }}</span>
      </div>
      <!-- 笔记内容 -->
      <div id="editor-container" class="py-3"></div>
      <!-- 标签区域 -->
      <div class="py-3 ">
        <NoteDetailTag :selectTags="note.tags" />
      </div>
      <!-- 作者信息 -->
      <div class="py-3 px-3">
        <el-row>
          <el-col :span="2">
            <el-avatar :size="70" :src="note.headUrl"
          /></el-col>
          <el-col :span="8">
            <div>
              {{ note.authorName }}
            </div>
            <div>TA的收藏</div>
            <div>TA的点赞</div>
          </el-col>
        </el-row>
      </div>
      <!-- 功能区 -->
      <div class="py-3 px-3">
        <el-row class="px-1">
          <el-col :span="10">
            <el-button type="danger" @click="likeAction(note.noteId)">点赞</el-button>
            <el-button type="success">分享到微信</el-button>
            <el-button type="primary">分享到QQ</el-button>
          </el-col>
          <el-col :span="14" class="text-end">
            点赞({{ note.likeNum }}) 阅读({{ note.viewNum }}) 评论({{
              note.commentNum
            }})
          </el-col>
        </el-row>
      </div>
      <!-- 评论区 -->
      <div class="py-3 px-3">
        <NoteComment :noteInfoId="noteId" />
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Editor from "@/editor/editor";
import NoteDetailTag from "./NoteDetailTag.vue";
import NoteComment from "./NoteComment.vue";
export default {
  name: "NoteDetail",
  components: {
    NoteDetailTag,
    NoteComment,
  },
  data() {
    return {
      editor: null,
      noteId: this.$route.params.noteId,
      note: {
        authorId: null,
        authorName: null,
        notename: null,
        noteContent: [],
        publishTime: null,
        headUrl: null,
        likeNum: 0,
        commentNum: 0,
        viewNum: 0,
        tags: [
          {
            tagId: null,
            tagName: null,
          },
        ],
      },
    };
  },
  async mounted() {
    //获取详情数据
    await this.getDetail();
    //初始化富文本
    this.initEditor();
  },

  methods: {
    //读取详情页数据，在页面加载时
    async getDetail() {
      await this.$axios("/api/note/detail?noteId=" + this.noteId).then(
        (response) => {
          let data = response.data;
          if (data.code == 200) {
            this.note = data.data;
          } else {
            alert(data.msg);
          }
        }
      );
    },
    initEditor() {
      this.editor = new Editor();
      this.editor.initContent(this.note.noteContent, true);
    },
    LikeAction() {
      this.$axios
        .get(" /api/home/like?noteId=" + this.noteId)
        .then((response) => {
          let data = response.data;
          if (data.code == 200) {
            this.noteli.likeNum += 1;
          }
        });
    },
  },
};
</script>

<style>
.headcolor{
  background-color:lightpink;
}
</style>